<!--弹出框-->
<template>
  <!--     弹出框弹出框-->
 <div>
   <div class="mark" @click="offDialog"></div>
   <div class="popBox">
     <div class="dialog_title">新增商品</div>
     <el-form ref="dialogFrom" :label-width="formLabelWidth" :model="dialogDate" :rules="dialogRules" class="dialog_content"
              style="height: 400px;">
       <el-form-item :inline-message="true" label="仓库:" prop="warehouseName">
         <el-select v-model="dialogDate.warehouseName" placeholder="请选择">
           <el-option
                   v-for="item in warehouses"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
           </el-option>
         </el-select>
       </el-form-item>
       <el-form-item class="form_btn">
         <el-button icon="el-icon-delete" style="color:#0175fa !important;" type="text" @click="removeAll"></el-button>
         <el-button icon="el-icon-circle-plus-outline" style="color:#0175fa !important;" type="text"
                    @click="addFormItem"></el-button>
       </el-form-item>
       <div
               v-for="(product,index) in dialogDate.products"
               :key="product.id">
         <el-row :gutter="20" style="margin-left: 0;margin-right: 0;margin-bottom: 15px">
           <el-col :span="7">
             <el-form-item
                     :prop="'products.'+index+'.productName'"
                     :rules="[
                      { required: true, message: '商品名不能为空'}
                    ]"
             >
               <el-select v-model="product.productName" placeholder="请选择商品">
                 <el-option
                         v-for="item in productList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="7">
             <el-form-item
                     :prop="'products.'+index+'.quantity'"
                     :rules="[
                      { required: true, message: '商品数不能为空'},
                      { type: 'number', message: '商品数必须为数字值'}
                    ]">
               <el-input v-model.number="product.quantity">
                 <template slot="prepend">商品数</template>
               </el-input>
             </el-form-item>
           </el-col>
           <el-col :span="7">
             <el-form-item
                     :prop="'products.'+index+'.recycle'"
                     :rules="[
                      { required: true, message: '回收数不能为空'},
                      { type: 'number', message: '回收数必须为数字值'}
                    ]">
               <el-input v-model.number="product.recycle">
                 <template slot="prepend">回收数</template>
               </el-input>
             </el-form-item>
           </el-col>
           <el-col :span="3">
             <el-form-item class="form_btn">
               <el-button icon="el-icon-remove-outline" style="color: #ff0000 !important;" type="text"
                          @click="removeFormItem(index)"></el-button>
             </el-form-item>
           </el-col>
         </el-row>
       </div>
     </el-form>
     <div class="dialog_footer">
       <el-button @click="offDialog">取 消</el-button>
       <el-button type="primary" @click="dialogAdd">确 定</el-button>
     </div>
   </div>

 </div>

</template>
<script>
import getTime from "../../../../utils/getTime";

export default {
  data() {
    return {
      // 表单数据
      dialogDate: {
        warehouseName: '', // 仓库名称
        products: [
          {id: 1, productName: '', quantity: '', recycle: '', updateTime: '',img: '', status: false}
        ]
        ,
      },
      formLabelWidth: '120px', // 表单文字宽度
      dialogVisible: false,  // 弹窗控制变量
      // 校验表单
      dialogRules: {
        warehouseName: [
          {required: true, message: '请选择仓库', trigger: 'blur'}
        ]
      },
      warehouses: [
        {
          value: '软件园三期仓库',
          label: '软件园三期仓库'
        }, {
          value: '软件园二期仓库',
          label: '软件园二期仓库'
        }, {
          value: '蔡塘广场仓库',
          label: '蔡塘广场仓库'
        }, {
          value: '江头仓库',
          label: '江头仓库'
        }
      ],  // 仓库名称数据
      productList: [
        {
          value: '娃哈哈矿泉水',
          label: '娃哈哈矿泉水'
        },
        {
          value: '百岁山',
          label: '百岁山'
        },
        {
          value: '娃哈哈桶装水',
          label: '娃哈哈桶装水'
        }
      ],
      visible: false,
      images: [
        "https://qny.samt.top/3ukysgdRM9PP43ET.jpg",
        "https://qny.samt.top/2SN2472MG0wpji.jpg",
              'https://qny.samt.top/2SN2472MG0wpji.jpg',
      ],
    }
  },
  mounted() {
  },
  watch: {
    isOpen () {
      this.visible = this.isOpen
    }
  },
  methods: {

    // 添加商品
    addFormItem() {
      let index = this.dialogDate.products.length - 1;
      let key = this.dialogDate.products[index].id + 1;
      this.dialogDate.products.push(
              { id: key, productName: '', quantity: '', recycle: '', updateTime: '',img: '', status: false}
      );
    },
    // 移除商品
    removeFormItem(index) {
      if (this.dialogDate.products.length > 1) {
        this.dialogDate.products.splice(index, 1);
      } else {
        this.$message({
          type: 'error',
          message: '已经是左后一个啦！'
        });
      }
    },
    // 清空
    removeAll() {
      // 获取数组长度
      let len = this.dialogDate.products.length;
      // 重置表单
      this.$refs.dialogFrom.resetFields();
      // 删除 除第一项的数据
      this.dialogDate.products.splice(1, len);
    },
    // 新增
    dialogAdd() {
      let that = this;
      // 校验
      this.$refs.dialogFrom.validate((valid) => {
        if (valid) {
          // 将数据传递至父组件
          let warehouseName = that.dialogDate.warehouseName
          let addDate = []
          that.dialogDate.products.forEach(product => {
            product.img = product.productName === '百岁山'? that.images[0] : product.productName === '娃哈哈桶装矿泉水' ? that.images[1] : that.images[2]
            product.updateTime = getTime()
            addDate.push({
              warehouseName,
              product
            })
          })
          that.$emit('addList', addDate);
          // 关闭弹窗
          that.offDialog()
        } else {
          return false;
        }
      })

    },
    // 结束清空弹窗数据，关闭弹窗
    offDialog() {
      // 回复初始值
      // this.removeAll();
      // 关闭弹窗
      // this.dialogVisible = false;
      // setTimeout(() => this.$emit('listenChild', false),1000)
      this.$emit('listenChild', false)
    },
  },


}
</script>
<style scoped>

/deep/ .el-dialog__header {
  padding: 0;
}

/deep/ .el-dialog__body, /deep/ .el-dialog--center .el-dialog__body {
  padding: 0;
}


.el-form-item {
  margin-bottom: 0;
}


.form_btn .el-button {
  font-size: 28px;
  padding: 5px 0 0 0;
  margin-left: 15px;
}

/deep/ .el-form-item__content {
  margin-left: 0 !important;
}
</style>
